<template>
    <div>
        <v-chart force-fit="true" height="500" :padding="padding" :data="data" :scale="scale">
            <v-tooltip />
            <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine"
                :grid="axis1Opts.grid" />
            <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine"
                :grid="axis2Opts.grid" />
            <v-legend dataKey="user" marker="circle" :offset="30" />
            <v-coord type="polar" :radius="0.8" />
            <v-line position="item*score" color="user" :size="2" />
            <v-point position="item*score" color="user" :size="4" shape="circle" />
            <v-area position="item*score" color="user" />
        </v-chart>
    </div>
</template>
    
<script>
const DataSet = require('@antv/data-set');

const sourceData = [
    { item: 'E', 2022: 70, 2021: 30 },
    { item: 'S', 2022: 60, 2021: 70 },
    { item: 'G', 2022: 50, 2021: 60 },
    { item: 'GRI', 2022: 40, 2021: 50 },
    { item: 'SDG', 2022: 60, 2021: 70 },
    { item: 'SASB', 2022: 70, 2021: 50 },
    { item: 'TCFD', 2022: 50, 2021: 40 },
    { item: '香港交易所标准', 2022: 30, 2021: 40 },
    { item: '上海标准', 2022: 60, 2021: 40 },
    { item: '其他标准', 2022: 50, 2021: 60 },
];

const dv = new DataSet.View().source(sourceData);
dv.transform({
    type: 'fold',
    fields: ['2022', '2021'],
    key: 'user',
    value: 'score',
});
const data = dv.rows;

const scale = [{
    dataKey: 'score',
    min: 0,
    max: 80,
}];

const axis1Opts = {
    dataKey: 'item',
    line: null,
    tickLine: null,
    grid: {
        lineStyle: {
            lineDash: null
        },
        hideFirstLine: false,
    }
};
const axis2Opts = {
    dataKey: 'score',
    line: null,
    tickLine: null,
    grid: {
        type: 'polygon',
        lineStyle: {
            lineDash: null,
        },
    },
};

export default {
    data() {
        return {
            data,
            scale,
            padding: [20, 20, 95, 20],
            axis1Opts,
            axis2Opts,
        };
    }
};
</script>
    